<template>
  <div class="container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <div class="top">
      <div class="info">
        <div class="left">
          <div class="font1">巨美后台管理系统</div>
          <div class="font2">管理员:{{ name }}</div>
          <div class="contant" v-for="item in infoData" :key="item.id">
            <div class="circle"></div>
            <div>{{ item.title }}</div>
          </div>
          <div class="contant" style="margin-top: 25px">
            <span style="margin-right: 10px">体验</span>
            <el-rate v-model="value1" show-text> </el-rate>
          </div>
          <div class="contant">
            <span style="margin-right: 10px">评价</span>
            <el-rate v-model="value1" show-text> </el-rate>
          </div>
        </div>
        <div class="right">
          <img src="../../assets/home.svg" alt="" />
        </div>
      </div>
      <div class="appData">
        <div class="top1">
          <div class="appIcon">
            <div class="left1">
              <div>企业用户</div>
              <div style="font-size: 22px">41,821</div>
              <div style="display: flex; align-items: center">
                <div style="margin-right: 10px">增长幅度</div>
                <div><el-tag sizi="mini" type="success">+7%</el-tag></div>
              </div>
            </div>
            <div class="right1">
              <img
                style="width: 40px; height: 40px"
                src="../../assets/companyNum.png"
                alt=""
              />
            </div>
          </div>
          <div class="appIcon">
            <div class="left1">
              <div>个人用户</div>
              <div style="font-size: 22px">11,821</div>
              <div style="display: flex; align-items: center">
                <div style="margin-right: 10px">下降幅度</div>
                <div><el-tag sizi="mini" type="danger">-3%</el-tag></div>
              </div>
            </div>
            <div class="right1">
              <img
                style="width: 35px; height: 35px"
                src="../../assets/userNum.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="top1" style="margin-top: 10px">
          <div class="appIcon">
            <div class="left1">
              <div>巨美好品</div>
              <div style="font-size: 22px">41,821</div>
              <div style="display: flex; align-items: center">
                <div style="margin-right: 10px">下降幅度</div>
                <div><el-tag sizi="mini" type="danger">+2%</el-tag></div>
              </div>
            </div>
            <div class="right1">
              <img
                style="width: 40px; height: 40px"
                src="../../assets/productNum.png"
                alt=""
              />
            </div>
          </div>
          <div class="appIcon">
            <div class="left1">
              <div>技术服务</div>
              <div style="font-size: 22px">11,821</div>
              <div style="display: flex; align-items: center">
                <div style="margin-right: 10px">上升幅度</div>
                <div><el-tag sizi="mini" type="success">+5%</el-tag></div>
              </div>
            </div>
            <div class="right1">
              <img
                style="width: 40px; height: 40px"
                src="../../assets/technology.png"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        width: 100%;
        height: 375px;
        display: flex;
        justify-content: space-between;
      "
    >
      <div class="charts1">
        <div class="title">用户变化趋势</div>
        <Echarts :options="options1"></Echarts>
      </div>
      <div class="caledar">
        <div
          style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            align-items: center;
          "
        >
          <img
            style="
              width: 80px;
              height: 80px;
              border-radius: 10px;
              margin-top: 50px;
            "
            src="http://8.140.245.205/avatar.png"
            alt=""
          />
          <div
            style="
              margin-top: 15px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22px;
              color: #333333;
              font-style: normal;
              text-transform: none;
              margin-bottom: 20px;
            "
          >
            JUI MEI APP
          </div>
          <div
            style="
              font-family: PingFang SC, PingFang SC;
              font-size: 16px;
              margin-bottom: 20px;
            "
          >
            寻找信阳市企业之美
          </div>
          <el-button type="primary" round>去官网看看</el-button>
          <div style="display: flex; margin-top: 30px">
            <el-button type="warning" size="mini">体验良好</el-button>
            <el-button type="success" size="mini">功能丰富</el-button>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        width: 100%;
        height: 375px;
        display: flex;
        margin: 20px auto;
        justify-content: space-between;
      "
    >
      <div class="charts1">
        <div class="title" style="margin-bottom: 10px">优质企业</div>
        <!-- <Echarts :options="options1"></Echarts> -->
        <el-table :data="tableData" border height="300px" style="width: 100%">
          <el-table-column type="index" align="center" label="序号" width="100">
          </el-table-column>
          <el-table-column
            prop="companyUrl"
            align="center"
            label="公司头像"
            width="150"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px; border-radius: 50%"
                :src="scope.row.companyUrl"
                :preview-src-list="[`${scope.row.companyUrl}`]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="license"
            align="center"
            label="营业执照"
            width="150"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px; border-radius: 5px"
                :src="scope.row.license"
                :preview-src-list="[`${scope.row.license}`]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            show-overflow-tooltip
            align="center"
            label="公司名称"
            width="250"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            show-overflow-tooltip
            align="center"
            label="公司地址"
            width="250"
          >
          </el-table-column>
          <el-table-column
            prop="briefInt"
            show-overflow-tooltip
            align="center"
            label="公司简介"
            width="250"
          >
          </el-table-column>
          <el-table-column
            prop="companyTypeStr"
            show-overflow-tooltip
            align="center"
            label="公司类型"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="honor"
            show-overflow-tooltip
            align="center"
            label="公司荣誉"
            width="250"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            show-overflow-tooltip
            align="center"
            label="联系方式"
            width="150"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="caledar">
        <el-calendar
          style="width: 100%; height: 100%"
          size="mini"
          v-model="value2"
        >
        </el-calendar>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getInfo } from "@/api/user";
import Echarts from "../../components/echarts.vue";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      value1: 5,
      value2: new Date(),
      infoData: [
        {
          id: 1,
          title: "寻找信阳市企业之美",
        },
        {
          id: 2,
          title: "内置常用模板，无需考虑交互排版，助你高效开发",
        },
        {
          id: 3,
          title: "丰富的布局模式，满足您的各类布局需求",
        },
        {
          id: 4,
          title: "优质的售后技术支持，完善的文档，让您事半功倍",
        },
      ],
      tableData: [
        {
          companyUrl:
            "http://8.140.245.205:3007/uploads/file-1741487643783-163527042.png",
          license:
            "http://8.140.245.205:3007/uploads/file-1741140141623-587008129.png",
          name: "信阳农林学院",
          address: "河南省信阳市北环路一号",
          briefInt:
            "信阳农林学院位于河南省信阳市平桥区北环路1号，是一所公办全日制普通本科学校，坐落于历史文化名城信阳，是首批全国新型职业农民培育示范基地、“国家航空植保科技创新联盟”成员。",
          companyTypeStr: "茶业",
          honor: "河南省文明校园标兵，河南省文明校园",
          phone: "16691524762",
        },
        {
          companyUrl:
            "http://8.140.245.205:3007/uploads/file-1741487643783-163527042.png",
          license:
            "http://8.140.245.205:3007/uploads/file-1741140141623-587008129.png",
          name: "信阳农林学院",
          address: "河南省信阳市北环路一号",
          briefInt:
            "信阳农林学院位于河南省信阳市平桥区北环路1号，是一所公办全日制普通本科学校，坐落于历史文化名城信阳，是首批全国新型职业农民培育示范基地、“国家航空植保科技创新联盟”成员。",
          companyTypeStr: "茶业",
          honor: "河南省文明校园标兵，河南省文明校园",
          phone: "16691524762",
        },
      ],
      options1: {},
    };
  },
  components: { Echarts },
  methods: {
    initCharts() {
      let newArr = [];
      // let curtimedata = [2.4, 2.4, 1.7, 2.3]
      // let pasttimedata = [2.3, 2.1, 1.9, 2.1];
      let curtimedata = [
        0, 100, 150, 200, 250, 350, 400, 450, 600, 650, 700, 800,
      ];
      let pasttimedata = [
        0, 200, 250, 300, 350, 450, 600, 850, 900, 950, 1000, 1050,
      ];

      newArr = curtimedata.concat(pasttimedata);

      let max = Math.max.apply(null, newArr);
      let min = Math.min.apply(null, newArr);

      // min = parseInt(String((min - 100) / 100)) * 100;
      // max = parseInt(String((max + 200) / 100)) * 100;

      let option = {
        color: ["#5b9bd5", "#ed7d31"],
        backgroundColor: "#FFF",
        grid: {
          top: 20,
          bottom: 80,
          left: "5%",
          right: 20,
        },
        legend: {
          bottom: "10",
          itemHeight: 10,
          data: ["企业用户", "个人用户"],
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            name: "",
            nameLocation: "center",
            nameGap: 30,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#CCC",
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            name: "",
            nameLocation: "center",
            nameGap: 40,
            nameTextStyle: {
              color: "#000",
            },
            min: 0,
            // max: max,
            scale: true,
            // interval: 100,
            axisLine: {
              lineStyle: {
                color: "#CCC",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#CCC",
              },
            },
            axisLabel: {
              color: "#000",
            },
          },
        ],
        series: [
          {
            name: "企业用户",
            type: "line",
            itemStyle: {
              color: "#5b9bd5",
              borderColor: "#5b9bd5",
              borderWidth: 4,
            },
            lineStyle: {
              width: 4,
            },
            data: curtimedata,
          },
          {
            name: "个人用户",
            type: "line",
            itemStyle: {
              color: "#ed7d31",
              borderColor: "#ed7d31",
              borderWidth: 4,
            },
            lineStyle: {
              width: 4,
            },
            data: pasttimedata,
          },
        ],
      };
      this.options1 = option;
    },
  },
  created() {
    // this.getInfo()
    this.initCharts();
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #f5f7f9;

  .top {
    width: 100%;
    height: 375px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .info {
      width: 49.5%;
      height: 375px;
      transition: box-shadow 0.5s ease;
      // border: 1px solid #000;
      background-color: #fff;
      padding: 15px;
      border-radius: 8px 8px 8px 8px;
      display: flex;
      justify-content: space-between;

      // align-items: center;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        // border: #000 1px solid;
        width: 62.5%;
        height: 100%;

        .font1 {
          margin-top: 15px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 22px;
          color: #333333;
          font-style: normal;
          text-transform: none;
        }

        .font2 {
          margin-top: 10px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
          font-style: normal;
          text-transform: none;
        }

        .contant {
          display: flex;
          align-items: center;
          margin-top: 15px;

          .circle {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #409eff;
            margin-right: 10px;
          }
        }
      }

      .right {
        width: 37.5%;
        height: 100%;
        // border: #000 1px solid;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .info:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .appData {
      width: 49.5%;
      height: 375px;
      // border: 1px solid #000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top1 {
        width: 100%;
        height: 48%;
        display: flex;
        justify-content: space-between;

        .appIcon {
          width: 49%;
          height: 100%;
          background-color: #fff;
          transition: box-shadow 0.5s ease;
          border-radius: 8px;
          padding: 20px;
          display: flex;
          justify-content: space-between;

          .left1 {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
          }
        }
      }

      .appIcon:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }
    }
  }

  .charts1 {
    width: 74.5%;
    height: 375px;
    border-radius: 8px;
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    transition: box-shadow 0.5s ease;
  }

  .caledar {
    width: 24.5%;
    height: 375px;
    border-radius: 8px;
    background-color: #fff;
    margin-top: 20px;
    transition: box-shadow 0.5s ease;
  }

  .charts1:hover {
    box-shadow: 5px 4px 8px rgba(0, 0, 0, 0.15);
  }

  .caledar:hover {
    box-shadow: 5px 4px 8px rgba(0, 0, 0, 0.15);
  }

  ::v-deep .el-calendar {
    width: 100%;
    height: 100%;
  }

  ::v-deep .el-calendar-table .el-calendar-day {
    width: 60px;
    height: 40px;
  }
}
</style>
